<template>
	<div class="app-container">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="所属仓库">
    <el-select v-model="formInline.depotId" placeholder="所属仓库">
    	<el-option value="" label="--请选择--"></el-option>
      <el-option v-for="plate in depots" :value="plate.id" :key="plate.id"
               :label="plate.name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="所属商品">
    <el-select v-model="formInline.productId" placeholder="所属商品">
    	<el-option value="" label="--请选择--"></el-option>
      <el-option v-for="pl in updateId" :value="pl.id" :key="pl.id"
               :label="pl.name"></el-option>
    </el-select>
  </el-form-item>
    <el-button type="primary" @click="onSubmit(Sa=true)">查询</el-button>
  </el-form-item>
</el-form>
	<el-table :data="table.tableData" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="报损编号" width="150">
      </el-table-column>
      <el-table-column prop="productname" label="商品名称" width="150">
      </el-table-column>
      <el-table-column prop="depotname" label="所属仓库" width="150">
      </el-table-column>
      <el-table-column prop="topXian" label="库存上限(点击修改)" width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.topXian" @blur="setTopXian(scope.$index, scope.row)" placeholder="点击进行设置"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="depotNum" label="库存数量" width="150">
      </el-table-column>
      <el-table-column prop="downXian" label="库存下限(点击修改)" width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.downXian" placeholder="点击进行设置" @blur="setDownXian(scope.$index, scope.row)"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changePage"
      v-if="table.isShow"
      background
      layout="prev, pager, next"
      :current-page="1"
      :total="table.total"
      :page-size="table.pageSize"
    >
    </el-pagination>
    </div>
</template>

<script>
	import {Inventoryall,set} from '@/api/Inventory';
	import {showAll as show} from '@/api/product';
	import {getAll} from '@/api/depot';
	export default {
      data() {
         return {
       updateId:[],
       depots:[],
       table:{
        page:1,
        limit:3,
        total: 3,
        pageSize:3,
        // 默认不显示分页
        isShow: true,
        tableData: []
      },/*msgmax:false,
      msgmin:false,*/
      Sa:false,
      showell:{
      	  name: '',
          depotId: '',
          productId: ''
          },
       formInline: {
          name: '',
          depotId: '',
          productId: ''
        },
    };
   },
  created: function () {
  	//页面加载时获取仓库数据
      getAll({}).then((res)=>{
      	this.depots=res.data;
      });
      //页面加载时执行获取报损日志数据
      this.changePage(1);
      //页面加载时获取商品数据
      show({}).then((res)=>{
      	this.updateId=res.data;
      });
  },
  methods: {
  	//商品库存过多过少于上下限时变换颜色
  	 tableRowClassName({row, rowIndex}) {
       if(row.downXian==null||row.downXian==""){

       }else if (row.depotNum>=row.topXian) {
        	this.msgmax=true;
          return 'warning-row';
        } else if (row.depotNum<=row.downXian) {
        	this.msgmin=true;
          return 'success-row';
        }else{
          return '';
        }
      },
    changePage(pageNum) {
    	this.table.page=pageNum;
    	//翻页功能
      Inventoryall({
      	'page':pageNum,
        'limit':this.table.limit,
        'name':this.showell.name,
        'typeName2':this.showell.depotId,
        'typeName3':this.showell.productId
      }).then((response) => {
      	const {data}=response;
        this.table.tableData =data;
      this.table.total = response.count;
    });
    },
    onSubmit() {
    	//保存本次查询数据
    if(this.Sa){
    this.showell.name=this.formInline.name;
    this.showell.depotId=this.formInline.depotId;
    this.showell.productId=this.formInline.productId;
    this.Sa=false;}
        Inventoryall({
          'page':this.table.page,
          'limit':this.table.limit,
          'name':this.formInline.name,
          'typeName2':this.formInline.depotId,
          'typeName3':this.formInline.productId
        }).then((response) => {
        this.table.tableData = response.data;
          this.table.total = response.count;
        });
      },
      //上限文本框修改触发
      setTopXian(index,row){
        console.log(row);
        set({
          'id':row.id,
          'topXian':row.topXian,
        }).then((response) => {
            this.$message({
              showClose: true,
              message: '修改上限成功',
              type: 'success'
            });
        });
      },
      //下限文本框修改触发
      setDownXian(index,row){
       set({
         'id':row.id,
         'downXian':row.downXian
       }).then((response) => {
           this.$message({
             showClose: true,
             message: '修改下限成功',
             type: 'success'
           });
       });
      },
  }
   };
</script>

<style>
	 .el-table .warning-row {
    background: #c1eddc;
  }

  .el-table .success-row {
    background: oldlace;
  }
</style>
